/**
 * 流程预览组件
 */
class WorkflowPreview {
    constructor(container) {
        this.container = container;
        this.workflow = null;
        this.template = null;
    }
    
    /**
     * 设置流程模板
     */
    setTemplate(template) {
        this.template = template;
        this.render();
    }
    
    /**
     * 设置流程实例
     */
    setWorkflow(workflow) {
        this.workflow = workflow;
        this.render();
    }
    
    /**
     * 清空预览
     */
    clear() {
        this.workflow = null;
        this.template = null;
        this.container.innerHTML = '';
    }
    
    /**
     * 渲染流程预览
     */
    render() {
        if (!this.template && !this.workflow) {
            this.container.innerHTML = '<div class="empty-state">请选择需求类型以预览流程</div>';
            return;
        }
        
        const nodes = this.workflow ? this.workflow.nodes : this.template.nodes;
        const currentNodeIndex = this.workflow ? this.workflow.currentNodeIndex : -1;
        
        const nodesHtml = nodes.map((node, index) => {
            let nodeClass = 'workflow-node';
            let statusIcon = '';
            
            if (this.workflow) {
                if (node.status === 'completed') {
                    nodeClass += ' completed';
                    statusIcon = '✅';
                } else if (node.status === 'active') {
                    nodeClass += ' active';
                    statusIcon = '🔄';
                } else {
                    statusIcon = '⏳';
                }
            }
            
            return `
                <div class="${nodeClass}" data-node-index="${index}">
                    <div class="workflow-node-status">${statusIcon}</div>
                    <div class="workflow-node-title">${this.escapeHtml(node.name)}</div>
                    <div class="workflow-node-assignee">
                        👤 ${node.defaultAssignee || '待分配'}
                    </div>
                    ${node.description ? `
                        <div class="workflow-node-description">
                            ${this.escapeHtml(node.description)}
                        </div>
                    ` : ''}
                    ${node.addedManually ? `
                        <div class="workflow-node-manual">
                            <small>手动加签</small>
                        </div>
                    ` : ''}
                </div>
                ${index < nodes.length - 1 ? '<div class="workflow-arrow">→</div>' : ''}
            `;
        }).join('');
        
        this.container.innerHTML = `
            <div class="workflow-nodes">
                ${nodesHtml}
            </div>
        `;
    }
    
    /**
     * HTML转义
     */
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// 导出到全局
window.WorkflowPreview = WorkflowPreview;